<template>
  <el-menu
    mode="horizontal"
    :ellipsis="false"
    class="navbar"
  >
    <div class="navbar-brand">
      <h2>脚本管理平台</h2>
    </div>
    <div class="flex-grow" />
    <el-menu-item index="1" @click="$router.push('/dashboard')">
      <el-icon><House /></el-icon>
      仪表盘
    </el-menu-item>
    <el-menu-item index="2" @click="$router.push('/scripts')">
      <el-icon><Document /></el-icon>
      脚本管理
    </el-menu-item>
    <el-menu-item index="3" @click="$router.push('/execution-logs')">
      <el-icon><List /></el-icon>
      执行日志
    </el-menu-item>
    <el-sub-menu index="4">
      <template #title>
        <el-icon><User /></el-icon>
        {{ authStore.user?.username }}
      </template>
      <el-menu-item index="4-1" @click="logout">
        <el-icon><SwitchButton /></el-icon>
        退出登录
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script>
import { useAuthStore } from '../store/auth'
import { useRouter } from 'vue-router'

export default {
  name: 'NavBar',
  setup() {
    const authStore = useAuthStore()
    const router = useRouter()

    const logout = () => {
      authStore.logout()
      router.push('/login')
    }

    return {
      authStore,
      logout
    }
  }
}
</script>

<style scoped>
.navbar {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e6e6e6;
}

.navbar-brand {
  margin-right: 20px;
}

.flex-grow {
  flex-grow: 1;
}
</style>
